<template>
<div>
  <table class="el-table ui-table" :class="{'table-fixed-header': isFixed}"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <thead class="ui-table__thead">
      <tr>
        <th class="ui-table_column_0">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="checkAll" @change="changeCheckAll"></el-checkbox>
              <span style="margin-left:5px">全选</span>
            </p>
          </div>
        </th>
        <th v-if="tableConfig.candidate.show" width="240" class="ui-table_column_1">
          <div class="cell">候选人</div>
        </th>
        <th v-if="tableConfig.status.show" class="ui-table_column_2">
          <div class="cell">
            <el-dropdown @command="handleStatusCommand" trigger="click">
              <span class="el-dropdown-link">
                状态 <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">新增候选人</el-dropdown-item>
                <el-dropdown-item command="2">已联系</el-dropdown-item>
                <el-dropdown-item command="3">未联系</el-dropdown-item>
                <el-dropdown-item command="4">已推荐</el-dropdown-item>
                <el-dropdown-item command="5">流程中</el-dropdown-item>
                <el-dropdown-item command="6">已Offer</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </th>
        <th v-if="tableConfig.dynamic.show" width="170" class="ui-table_column_3">
          <div class="cell">动态</div>
        </th>
        <th v-if="tableConfig.contact.show" class="ui-table_column_4">
          <div class="cell">联系TA</div>
        </th>
        <th v-if="tableConfig.updateTime.show" class="ui-table_column_5">
          <div class="cell">更新时间</div>
        </th>
        <th v-if="tableConfig.source.show" class="ui-table_column_6">
          <div class="cell">
            <el-dropdown @command="handleStatusCommand" trigger="click">
              <span class="el-dropdown-link">
                简历来源 <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">伯乐</el-dropdown-item>
                <el-dropdown-item command="2">自己录入</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </th>
        <th v-if="tableConfig.lastCompany.show" class="ui-table_column_7">
          <div class="cell">上家公司</div>
        </th>
        <th v-if="tableConfig.workingLife.show" class="ui-table_column_8">
          <div class="cell">工作年限</div>
        </th>
        <th v-if="tableConfig.gender.show" class="ui-table_column_9">
          <div class="cell">性别</div>
        </th>
        <th v-if="tableConfig.highestEducation.show" class="ui-table_column_10">
          <div class="cell">最高学历</div>
        </th>
        <th v-if="tableConfig.academy.show" class="ui-table_column_11">
          <div class="cell">毕业院校</div>
        </th>
        <th width="140" class="ui-table_column_12">
          <div class="cell">执行</div>
        </th>
      </tr>
      <tr v-if="!noHeaderHandleVisible">
        <th :colspan="tableConfig.showLength + 1">
          <div class="header-handle-box">
            <!-- 更改状态 -->
            <el-dropdown trigger="click">
              <el-button class="table-header-button">
                <i class="icon-table-head icon-head-status icon--left"></i>
                更改状态 <i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>新增候选人</el-dropdown-item>
                <el-dropdown-item>已联系</el-dropdown-item>
                <el-dropdown-item>未联系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 添加按钮 -->
            <el-dropdown trigger="click">
              <el-button class="table-header-button">
                <i class="icon-table-head icon-head-plus icon--left"></i>
                添加 <i class="el-icon-caret-bottom el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>新增候选人</el-dropdown-item>
                <el-dropdown-item>已联系</el-dropdown-item>
                <el-dropdown-item>未联系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <!-- 批量邮件 -->
            <el-button class="table-header-button" icon="icon-table-head icon-head-mail">
              批量邮件
            </el-button>
            <!-- 批量微信 -->
            <el-button class="table-header-button" icon="icon-table-head icon-head-wx">
              批量微信
            </el-button>
          </div>
        </th>
      </tr>
    </thead>
  </table>
  <div v-if="isFixed" style="height:50px;"></div>
  <table class="el-table ui-table"
    cellspacing="0"
    cellpadding="0"
    border="0">
    <!-- 表头 -->
    <tbody>
      <tr v-for="column in tableData">

        <!-- 操作选择 -->
        <td class="ui-table_column_0" width="80">
          <div class="cell t-left">
            <p class="ml-10">
              <el-checkbox v-model="column.isChecked" @change="changeCheckItem"></el-checkbox>
              <i class="icon icon-collection ml-10" @click="column.isCollection = !column.isCollection" :class="{active: column.isCollection}" ></i>
            </p>
          </div>
        </td>

        <!-- 候选人 -->
        <td v-if="tableConfig.candidate.show" width="240" class="ui-table_column_1">
          <div class="cell">
            <div class="td-user">
              <div class="user-head flex-grow-0">
                <img :src="column.head" alt="">
              </div>
              <div class="info">
                <p class="text-nowrap"><a href="javascript:;" class="button-text" @click="watchResume(column)">{{column.name}}</a></p>
                <p class="text-nowrap">{{column.companyName}}</p>
                <p class="text-nowrap">{{column.resume}}</p>
                <p class="text-nowrap">项目：{{column.project}}</p>
              </div>
            </div>
          </div>
        </td>

        <!-- 状态 -->
        <td v-if="tableConfig.status.show" class="ui-table_column_2">
          <div class="cell">
            <div style="display:inline-block;position: relative;padding: 30px 0">
              <el-dropdown @command="changeStatus" trigger="click">
                <span class="el-dropdown-link">
                  {{column.statusName}} <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">已联系</el-dropdown-item>
                  <el-dropdown-item command="3">未联系</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div style="display:inline-block;position: relative;padding: 30px 0;margin-left: 10px;">
              <el-dropdown @command="changeStatus" trigger="click">
                <span class="el-dropdown-link">
                  {{column.processName}} <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="4">已推荐</el-dropdown-item>
                  <el-dropdown-item command="5">流程中</el-dropdown-item>
                  <el-dropdown-item command="6">已Offer</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>  
        </td> 

        <!-- 动态 -->
        <td v-if="tableConfig.dynamic.show" width="170" class="ui-table_column_3">
          <div class="cell">
            <el-row>
              <el-popover
                placement="bottom-start"
                width="270"
                trigger="hover">
                <div class="dynamic-box">
                  <p><span class="button-text">hyybai</span>看过Ta的资料</p>
                  <p>1小时前</p>
                </div>
                <div class="dynamic-box">
                  <p><span class="button-text">hyybai</span>看过Ta的资料</p>
                  <p>1小时前</p>
                </div>
                <div class="dynamic-box">
                  <p><span class="button-text">hyybai</span>看过Ta的资料</p>
                  <p>1小时前</p>
                </div>
                <div class="dynamic-box">
                  <p><span class="button-text">hyybai</span>看过Ta的资料</p>
                  <p>1小时前</p>
                </div>
                <div class="dynamic-box">
                  <p><span class="button-text">Blue</span>看过Ta的资料</p>
                  <p>3小时前</p>
                </div>
                <el-col :span="12" style="height:22px;" slot="reference">
                  <i class="icon icon-watch"></i>
                  <span>{{column.dynamic.watch}}</span>
                </el-col>
              </el-popover>
              <el-col :span="12" style="height:22px;">
                <i class="icon icon-notice"></i>
                <span>{{column.dynamic.notice}}</span>
              </el-col>
            </el-row>
            <div class="ready-tips" v-if="column.isRead">您于{{column.readTime}}日阅读过</div>
          </div>
        </td> 

        <!-- 联系TA -->
        <td v-if="tableConfig.contact.show" class="ui-table_column_4">
          <div class="cell">
            <i class="icon icon-contact-wx" v-if="column.contact.wx"></i>
            <el-popover
              v-if="column.contact.mobile"
              placement="bottom-start"
              width="250"
              v-model="column.phonePopupVisible"
              popper-class="phonePopupVisible">
              <div>
                <div class="mt-10 mb-10">
                  <!-- <span class="icon icon-c-phone"></span> -->
                  <el-input size="mini" v-model="column.mobile" style="width:176px"></el-input>
                  <el-button size="mini" type="primary" class="ml-10" @click="takePhone(column)">呼叫</el-button>
                </div> 
              </div>
              <i class="icon icon-contact-mobile" slot="reference" @click="column.phonePopupVisible = true"></i>
            </el-popover>
            <i class="icon icon-contact-email" v-if="column.contact.email" @click="mailVisible=true"></i>
          </div>
        </td>

        <!-- 更新时间 -->
        <td v-if="tableConfig.updateTime.show" class="ui-table_column_5">
          <div class="cell">
            {{column.updataTime}}
          </div>
        </td>

        <!-- 来源渠道 -->
        <td v-if="tableConfig.source.show" class="ui-table_column_6">
          <div class="cell">
            {{column.source}}
          </div>
        </td>

        <!-- 上家公司 -->
        <td v-if="tableConfig.lastCompany.show" class="ui-table_column_7">
          <div class="cell">
            {{column.lastCompany}}
          </div>
        </td>

        <!-- 工作年限 -->
        <td v-if="tableConfig.workingLife.show" class="ui-table_column_8">
          <div class="cell">
            {{column.lastCompany}}
          </div>
        </td>

        <!-- 性别 -->
        <td v-if="tableConfig.gender.show" class="ui-table_column_9">
          <div class="cell">
            {{column.gender}}
          </div>
        </td>

        <!-- 最高学历 -->
        <td v-if="tableConfig.highestEducation.show" class="ui-table_column_10">
          <div class="cell">
            {{column.highestEducation}}
          </div>
        </td>
        
        <!-- 毕业院校 -->
        <td v-if="tableConfig.academy.show" class="ui-table_column_11">
          <div class="cell">
            {{column.academy}}
          </div>
        </td>

        <!-- 操作 -->
        <td width="140" class="ui-table_column_12">
          <div class="cell">
            <ui-button size="mini" type="lightblue" class="table-button" @click="recommend(column)">推荐给面试官</ui-button>
            <ui-button size="mini" type="gray" class="table-button" @click="release(column)">释放到人才库</ui-button>
            <ui-button size="mini" type="green" class="table-button">发起面试</ui-button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <!-- 邮件弹框 -->
  <m-mail :visible.sync="mailVisible"></m-mail>

  <!-- 电话弹框 -->
  <m-phone :visible.sync="phoneVisible"></m-phone>

  <!-- 推荐给面试官弹窗 -->
  <dialog-recommend :visible.sync="recommendVisible"></dialog-recommend>

  <!-- 简历模块 -->
  <m-resumeDialog :visible.sync="resumeDialogVisible" :resumeId="data.id"></m-resumeDialog>
</div>
</template>

<script>
  
  import api from '@/api/api.js'
  import {mapState, mapMutations} from 'vuex'
  import {Checkbox, Input, Table, TableColumn, Row, Col, Dropdown, DropdownMenu, DropdownItem, Popover, Button} from 'element-ui'
  import Mail from '@/components/common/components/mail'
  import Phone from '@/components/common/components/phone'
  import DialogRecommend from '../dialogRecommend'
  import ResumeDialog from '@/components/resume/dialog'
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [Table.name]: Table,
      [Input.name]: Input,
      [TableColumn.name]: TableColumn,
      [Row.name]: Row,
      [Col.name]: Col,
      [Dropdown.name]: Dropdown,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [Popover.name]: Popover,
      [Button.name]: Button,
      'm-mail': Mail,
      'm-phone': Phone,
      DialogRecommend,
      'm-resumeDialog': ResumeDialog
    },
    computed: {
      // ...mapState({
      //   tableConfig: state => state.admin.tableConfig
      // }),
    },
    data () {
      return {
        loading: true,
        mailVisible: false, //邮件功能弹窗
        phoneVisible: false, //电话功能弹窗
        tableData: [], //表格数据内容
        currentPage: 1, //当前页数
        checkAll: false, //全选按钮
        noHeaderHandleVisible: true, //是否显示表头下的操作
        recommendVisible: false, //是否显示推荐给面试官弹窗
        isFixed: false,
        fixHeader: 50,
        tableConfig: {},
        resumeDialogVisible: false,
        data: {}
      }
    },
    created() {
      //获取表头配置数据
      this.tableConfig = {
        "candidate": { //候选人
          label: '候选人',
          show: true,
          sort: 1 
        },
        "status": { //状态
          label: '状态',
          show: true,
          sort: 2
        }, 
        "dynamic": { //动态
          label: '动态',
          show: true,
          sort: 3 
        }, 
        "mobile": { //联系方式
          label: '联系方式',
          show: true,
          sort: 4
        }, 
        "contact": { //联系TA
          label: '联系TA',
          show: true,
          sort: 5
        }, 
        "updateTime": { //更新时间
          label: '更新时间',
          show: true,
          sort: 6 
        }, 
        "source": { //来源渠道
          label: '来源渠道',
          show: true,
          sort: 7
        }, 
        "lastCompany": { //上家公司
          label: '上家公司',
          show: true,
          sort: 1 
        }, 
        "workingLife": { //工作年限
          label: '工作年限',
          show: false,
          sort: 2
        }, 
        "gender": { //性别
          label: '性别',
          show: false,
          sort: 3 
        }, 
        "highestEducation": { //最高学历
          label: '最高学历',
          show: false,
          sort: 4 
        }, 
        "academy": { //毕业院校
          label: '毕业院校',
          show: false,
          sort: 5
        },
        showLength: 8
      }
      this.loadData()
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/talent_pool') == 0){
          this.initSticky()
        }
      })
    },
    mounted() {
      // this.initWidth()
      window.onresize = () => {
        this.initWidth()
      }
    },
    methods: {
      ...mapMutations ([
        'adminTableConfig'
      ]),
      initSticky(){
        const _height = this.$util.getScrollTop()
        const _zoom = this.$util.getZoom()
        const topHeight = document.getElementsByClassName('temp-header')[0].clientHeight + 
          document.getElementsByClassName('search-form')[0].clientHeight + 20
        if(_height >= topHeight * _zoom) {
          this.isFixed = true
          this.initWidth()
        } else {
          this.isFixed = false
          this.initWidth()
        }
      },
      // 初始化表格高度
      initWidth() {
        for(let i=0; i<14; i++) {
          if(document.getElementsByClassName('ui-table_column_' + i)[1]) {
            const _w = document.getElementsByClassName('ui-table_column_' + i)[1].clientWidth || 0
            document.getElementsByClassName('ui-table_column_' + i)[0].style.width = _w + 'px'
          }
        }
        if(document.getElementsByClassName('ui-table')[1]){
          document.getElementsByClassName('ui-table')[0].style.width = document.getElementsByClassName('ui-table')[1].clientWidth + 'px'
        }
      },
      watchResume(data){
        this.data = data
        this.resumeDialogVisible = true
      },
      loadData() {
        // 获取表格数据
        this.loading = true;
        api.getMyTalentPoolTableData(this.currentPage).then(res => {
          res.list.forEach(item => {
            item.phonePopupVisible = false;
            item.isChecked = false;
          })
          this.tableData = this.tableData.concat(res.list)
          this.currentPage ++ 
          this.loading = false
          this.$nextTick(_ => {
            this.initWidth()
          })
        })
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if(rowIndex == 0 ){
          if(columnIndex == 0){
            return [1, this.tableConfig.showLength+1]
          }else{
            return [0, 0]
          }
        }
      },
      // 全选时
      changeCheckAll() {
        var flag = true;
        this.tableData.forEach(item => {
          if(!item.isChecked){
            flag = false
          }
        })
        if(flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
        this.tableData.forEach(item => {
          item.isChecked = !flag
        })
      },
      changeCheckItem() {
        var flag = false
        this.tableData.forEach(item => {
          if(item.isChecked){
            flag = true
          }
        })
        if(!flag){
          this.noHeaderHandleVisible = true
        }else{
          this.noHeaderHandleVisible = false
        }
      },
      //选择表头状态
      handleStatusCommand(status) {

      },
      //单条改变状态
      changeStatus(status) {
        
      },
      //打电话状态
      takePhone(item) {
        item.phonePopupVisible = false
        this.phoneVisible = true;
      },
      //推荐给面试官
      recommend(data) {
        this.recommendVisible = true
      },
      //释放到人才库
      release(data) {
        this.$confirm('确认释放到人才库？',{
          type: 'warning'
        }).then(_ => {
          done();
        }).catch(_ => {});
      }
    }
  }
</script>

<style lang="scss">
  .phonePopupVisible:last-child{
    display: none!important;
  }
  .dynamic-box{
    display: flex;
    justify-content: space-between;
    p{
      display: block;
      flex-grow: 0;
      color: #919191;
      margin: 8px 0;
    }
    p:last-child{
      width: 80px;
      text-align: right
    }
  }
</style>
